<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>何为数据代理</title>
</head>
    <body>
        <!-- 数据代理：通过一个对象代理另一个对象中属性的操作 读/写 -->
        <script type="text/javascript">
            let obj1 = {x:100};
            let obj2 = {y:200};

            Object.defineProperty(obj2, 'x', {
                //当有人读取obj2对象的x属性时，调用getter函数
                get:function(){
                    //将obj1对象的x属性的值，返回赋值给当前对象obj2的x属性
                    return obj1.x;
                },

                //当有人修改obj2对象的x属性时，调用setter函数
                set:function(value){
                    //因为obj2对象的x属性读取的是obj1对象的x的值，所以当修改obj2的x属性的值时会调用setter方法，收到修改的值并赋值给obj1的x属性;
                    obj1.x = value;
                }
            })
        </script>
    </body>
</html>